﻿@*Displays the grid overlay. Useful for checking your layout for proper margins and column adjustments*@
<div id="grid-displayer" style="opacity: 0.5; z-index: 4; display: none;">
    <div class="row">
        <div class="one columns" style="background: none repeat scroll 0% 0% transparent; opacity: 1;">
            <div style="width: 100%; height: 100%;" class="innerG"></div>
        </div>
        <div class="one columns" style="background-color: transparent; opacity: 1;">
            <div style="width: 100%; height: 100%;" class="innerG"></div>
        </div>
        <div class="one columns" style="background: none repeat scroll 0% 0% transparent; opacity: 1;">
            <div style="width: 100%; height: 100%;" class="innerG"></div>
        </div>
        <div class="one columns" style="background-color: transparent; opacity: 1;">
            <div style="width: 100%; height: 100%;" class="innerG"></div>
        </div>
        <div class="one columns" style="background: none repeat scroll 0% 0% transparent; opacity: 1;">
            <div style="width: 100%; height: 100%;" class="innerG"></div>
        </div>
        <div class="one columns" style="background-color: transparent; opacity: 1;">
            <div style="width: 100%; height: 100%;" class="innerG"></div>
        </div>
        <div class="one columns" style="background: none repeat scroll 0% 0% transparent; opacity: 1;">
            <div style="width: 100%; height: 100%;" class="innerG"></div>
        </div>
        <div class="one columns" style="background-color: transparent; opacity: 1;">
            <div style="width: 100%; height: 100%;" class="innerG"></div>
        </div>
        <div class="one columns" style="background: none repeat scroll 0% 0% transparent; opacity: 1;">
            <div style="width: 100%; height: 100%;" class="innerG"></div>
        </div>
        <div class="one columns" style="background-color: transparent; opacity: 1;">
            <div style="width: 100%; height: 100%;" class="innerG"></div>
        </div>
        <div class="one columns" style="background: none repeat scroll 0% 0% transparent; opacity: 1;">
            <div style="width: 100%; height: 100%;" class="innerG"></div>
        </div>
        <div class="one columns" style="background-color: transparent; opacity: 1;">
            <div style="width: 100%; height: 100%;" class="innerG"></div>
        </div>
    </div>
</div>

<style>
    #grid-displayer {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        /* Default value, use body data-grid-zindex to overwrite */
        -moz-box-sizing: padding-box;
        -webkit-box-sizing: padding-box;
        -ms-box-sizing: padding-box;
        box-sizing: padding-box;
        pointer-events: none;
    }
    #grid-displayer .row {
        height: 100%;
    }
    #grid-displayer .one {
        height: 100%;
        background: black;
        /* Default value, use body data-grid-color to overwrite */
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
        opacity: 0.3;
        /* Default value, use body data-grid-opacity to overwrite */
    }
    #grid-displayer .innerG {
        background-color: #00AEFF;
    }
</style>
